
# 🎯 演示页面

这是一个演示页面，展示了MDX的强大功能。

## 📊 交互式组件

<button 
  onClick={() => alert('你好！这是MDX中的交互式按钮')}
  style={{
    background: '#0070f3',
    color: 'white',
    border: 'none',
    padding: '10px 20px',
    borderRadius: '5px',
    cursor: 'pointer',
    fontSize: '16px'
  }}
>
  点击我！
</button>

## 📝 代码高亮

```javascript
function greet(name) {
  return `Hello, ${name}!`;
}

console.log(greet('MDX'));
```

## 🎨 样式展示

<div style={{
  display: 'grid',
  gridTemplateColumns: 'repeat(auto-fit, minmax(200px, 1fr))',
  gap: '1rem',
  margin: '2rem 0'
}}>
  <div style={{
    background: '#f0f0f0',
    padding: '1rem',
    borderRadius: '8px',
    textAlign: 'center'
  }}>
    <h4>卡片1</h4>
    <p>MDX支持网格布局</p>
  </div>
  <div style={{
    background: '#e0e0e0',
    padding: '1rem',
    borderRadius: '8px',
    textAlign: 'center'
  }}>
    <h4>卡片2</h4>
    <p>响应式设计</p>
  </div>
</div>

## 🔗 导航

- [返回首页](/)
- [关于我们](/about)
